<template>
	<div class="login">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />
		<div class="content">
			<van-tabs sticky swipeable animated v-model="active">
				<van-tab title="用户登录">
					<div class="loginBox">
						<div class="list">
							<van-cell-group>
								<van-field v-model="account" clearable :left-icon="user" placeholder="请输入用户名" />
								<van-field v-model="password" clearable type="password" :left-icon="pass" placeholder="请输入密码" />
							</van-cell-group>
							<p @click="forget">忘记密码</p>
							<div class="button-login" @click="login">登录</div>
							<div class="button-register" @click="register">注册</div>
							<div class="huanying">欢迎登录家园生活服务网</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="站长登录">
					<div class="loginBox">
						<div class="list">
							<van-cell-group>
								<van-field v-model="account" clearable :left-icon="user" placeholder="请输入用户名" />
								<van-field v-model="password" clearable type="password" :left-icon="pass" placeholder="请输入密码" />
							</van-cell-group>
							<p @click="forget">忘记密码</p>
							<div class="button-login">登录</div>
							<div class="button-register" @click="register">注册</div>
							<div class="huanying">欢迎登录家园生活服务网</div>
						</div>
					</div>
				</van-tab>
			</van-tabs>
			<div class="bg">
				<img :src="tu" alt="">
			</div>

		</div>
	</div>
</template>

<script>
	import user from "@/assets/img/username.png"
	import pass from "@/assets/img/password.png"
	import tu from "@/assets/img/tu.png"
	export default {
		name: "Login",
		components: {

		},
		data() {
			return {
				title: "用户登录",
				account: "",
				password: '',
				user: user,
				pass: pass,
				tu: tu,
				active: 0
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			login() {
				let loginData = {
					account: this.account,
					password: this.password
				}
				let checkData = {
					username: this.account
				}



				this.$api.login.login(loginData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$toast.success(res.msg)
						this.$setcookie("userInfo",JSON.stringify(res.data.userinfo))
						this.$setcookie("jy_token",res.data.userinfo.token)
						this.$router.push(this.$route.query.redirect || '/')

					} else {
						this.$toast.fail(res.msg);
					}

				})


			},
			register() {

				if (this.active == 0) {
					this.$router.push({
						path: "/register"
					})
				} else {
					this.$router.push({
						path: "/stationRegister"
					})
				}

			},
			forget() {
				this.$router.push({
					path: "/forget"
				})
			}
		}


	}
</script>

<style lang="less">
	.login {
		padding-top: 46px;
		background: #fff;
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}

			.van-nav-bar__text {
				color: #5C5C5C;
			}
		}

		.content {
			padding-top: 2rem;

			.van-tab {
				font-size: 0.94rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(76, 76, 76, 1);

			}

			.van-tab--active {
				font-size: 0.94rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(254, 118, 0, 1);
			}

			.van-tabs__line {
				width: 2.13rem !important;
				height: 0.19rem !important;
				background: rgba(254, 118, 0, 1) !important;
				border-radius: 0.5rem !important;
				bottom: 1.4rem !important;
			}

			.van-tab__pane {
				padding: 1rem 0.81rem;
			}

			.loginBox {
				background: rgba(255, 255, 255, 1);
				box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem rgba(254, 118, 0, 0.17);
				border-radius: 0.5rem;
				padding: 2.91rem 1.34rem;

				.list {
					.van-cell {
						height: 2.75rem;
						border: 1px solid rgba(229, 229, 229, 1);
						border-radius: 2rem;
						margin-bottom: 0.72rem;
						padding-left: 1.63rem;

						input {
							padding-left: 0.7rem;
							background: none;

							&::placeholder {
								font-size: 0.81rem;
								font-family: PingFang SC;
								font-weight: 500;
								color: rgba(204, 204, 204, 1);
							}

							&:focus {
								background-color: none;
							}
						}
					}

					p {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(254, 118, 0, 1);
						line-height: 0.75rem;
						margin-bottom: 0.81rem;
						text-align: right;
					}

					.button-login {
						height: 2.75rem;
						background: rgba(254, 118, 0, 1);
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 0.63rem;
					}

					.button-register {
						height: 2.75rem;
						border-radius: 2rem;
						font-size: 0.94rem;
						font-family: PingFang SC;
						border: 1px solid rgba(254, 118, 0, 1);
						font-weight: 500;
						color: #FE7600;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.huanying {
						font-size: 0.75rem;
						font-family: PingFang SC;
						font-weight: 500;
						color: rgba(122, 122, 122, 1);
						line-height: 0.75rem;
						text-align: center;
						margin-top: 1.22rem;
					}
				}
			}

			.bg {
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					width: 10.1rem;
				}
			}
		}

		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			display: none;
		}
	}
</style>
